<template>
  <div class="getPhoneCode">
    <NavBar routerName="Register"></NavBar>
    <van-form @submit="onSubmit">
      <van-field v-model="login.sms" left-icon="phone" center clearable placeholder="请输入短信验证码">
        <template #button>
          <van-button size="small" type="default" style="color:red">发送验证码</van-button>
        </template>
      </van-field>
      <van-field v-model="login.username" :border="true" left-icon="manager" name="用户名" placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="login.password" left-icon="lock" type="password" name="密码" placeholder="密请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
      <van-field v-model="login.confirmPassword" left-icon="lock" type="password" name="密码" placeholder="密请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px;">
        <van-button color="#DB3D3C" block type="info" native-type="submit">确认</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import NavBar from '@/components/navBar.vue'
export default {
  name: 'GetPhoneCode',
  components: {
    NavBar
  },
  data () {
    return {
      login: {
        sms: '',
        username: '',
        password: '',
        confirmPassword: ''
      },
      msg: ''
    }
  },
  watch: {
    token: {
      handler (newValue) {
        console.log(111111111111111111111111)
        if (newValue === '成功') {
          this.$router.replace({ name: 'Login' })
          try {
            window.localStorage.removeItem('token')
            window.localStorage.removeItem('userInfo')
          } catch (e) { }
          this.$toast.success(`${newValue}`)
        } else {
          this.$toast.fail(`${newValue}`)
        }
      }
    }
  },
  mounted () {
    this.msg = this.$store.state.Login.msg
  },
  methods: {
    onSubmit () {
      const options = {
        code: this.login.sms,
        mobile: this.$route.params.mobile,
        username: this.login.username,
        password: this.login.password,
        repeatPassword: this.login.confirmPassword
      }
      this.$store.dispatch('Login/goRegister', options)
      console.log(this.$store)
      const that = this
      setTimeout(() => {
        if (that.msg === '成功') {
          that.$router.replace({ name: 'Login' })
          try {
            window.localStorage.removeItem('token')
            window.localStorage.removeItem('userInfo')
          } catch (e) { }
          that.$toast.success(`${that.msg}`)
        } else {
          that.$toast.fail(`${that.msg}`)
        }
      }, 400)
    }
  }
}

</script>
<style scoped lang='scss'>
.header {
  padding: 30px 0;
  font-size: 16px;
  text-align: center;
}

::v-deep .van-field {
  width: 90%;
  border: 1px solid #ccc;
  height: 40px;
  text-align: center;
  // line-height: 32px;
  margin: 15px 20px;
}

::v-deep .van-field__body input {
  font-size: 16px;
}

.reg-for-style {
  position: relative;
  font-size: 14px;
  padding: 0 20px;

  a:nth-child(1) {
    text-align: left;
  }

  a:nth-child(2) {
    position: absolute;
    right: 20px;
    text-align: right;
  }
}
</style>
